<script setup lang="ts">
import { ref } from 'vue'
import {
  Menu as IconMenu,
  Message,
  Setting,
  User,
  Bell,
  Document,
  Grid,
  Connection
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const activeMenu = ref('home')

// 产品特点数据
const features = [
  {
    title: '简单易用',
    desc: '直观的界面设计，快速上手',
    icon: Document,
    color: '#409EFF'
  },
  {
    title: '功能强大',
    desc: '满足各类业务需求',
    icon: Grid,
    color: '#67C23A'
  },
  {
    title: '安全可靠',
    desc: '数据加密，安全防护',
    icon: Setting,
    color: '#E6A23C'
  },
  {
    title: '高效协作',
    desc: '团队协作，实时同步',
    icon: Connection,
    color: '#F56C6C'
  }
]

// 产品展示数据
const products = [
  {
    id: 1,
    name: '企业版',
    price: '￥299/月',
    features: ['无限项目数', '全部功能模块', '7×24技术支持', '专属顾问服务'],
    isPopular: true
  },
  {
    id: 2,
    name: '团队版',
    price: '￥199/月',
    features: ['最多50个项目', '基础功能��块', '在线技术支持', '每月系统培训'],
    isPopular: false
  },
  {
    id: 3,
    name: '基础版',
    price: '￥99/月',
    features: ['最多10个项目', '核心功能模块', '社区支持', '文档中心'],
    isPopular: false
  }
]

// 添加移动端菜单控制
const isMobileMenuOpen = ref(false)

// 添加关闭菜单方法
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}
</script>

<template>
  <div class="page-container">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="logo">
        <img src="../assets/logo.png" alt="Logo" class="h-6">
        <span class="ml-2 text-lg font-bold">产品名称</span>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <div class="mobile-menu-btn" @click="isMobileMenuOpen = !isMobileMenuOpen">
        <el-icon :size="24"><IconMenu /></el-icon>
      </div>

      <!-- 移动端菜单 -->
      <div class="mobile-menu" :class="{ 'active': isMobileMenuOpen }">
        <el-menu mode="vertical" :default-active="activeMenu" @select="closeMobileMenu">
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="features">功能</el-menu-item>
          <el-menu-item index="pricing">价格</el-menu-item>
          <el-menu-item index="about">关于我们</el-menu-item>
        </el-menu>
        <div class="mobile-actions">
          <el-button link @click="closeMobileMenu">登录</el-button>
          <el-button type="primary" @click="closeMobileMenu">免费试用</el-button>
        </div>
      </div>

      <!-- 桌面端导航 -->
      <div class="nav-links">
        <el-menu mode="horizontal" :default-active="activeMenu">
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="features">功能</el-menu-item>
          <el-menu-item index="pricing">价格</el-menu-item>
          <el-menu-item index="about">关于我们</el-menu-item>
        </el-menu>
      </div>

      <div class="actions">
        <el-button link>登录</el-button>
        <el-button type="primary" class="ml-4">免费试用</el-button>
      </div>
    </el-header>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- Hero 区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">
            让您的业务更上一层楼
          </h1>
          <p class="hero-desc">
            提供专业的解决方案，助力企业数字化转型
          </p>
          <div class="hero-actions">
            <el-button type="primary" size="large">立即开始</el-button>
            <el-button size="large" class="ml-4">了解更多</el-button>
          </div>
        </div>
      </section>

      <!-- 特点展示 -->
      <section class="features-section">
        <h2 class="section-title">产品特点</h2>
        <el-row :gutter="30">
          <el-col :span="6" v-for="feature in features" :key="feature.title">
            <el-card class="feature-card" shadow="hover">
              <el-icon :size="40" :color="feature.color">
                <component :is="feature.icon" />
              </el-icon>
              <h3 class="feature-title">{{ feature.title }}</h3>
              <p class="feature-desc">{{ feature.desc }}</p>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <!-- 产品价格 -->
      <section class="pricing-section">
        <h2 class="section-title">价格方案</h2>
        <el-row :gutter="30">
          <el-col :span="8" v-for="product in products" :key="product.id">
            <el-card 
              class="price-card" 
              :class="{ 'popular': product.isPopular }"
              shadow="hover"
            >
              <h3 class="price-title">{{ product.name }}</h3>
              <div class="price-amount">{{ product.price }}</div>
              <ul class="feature-list">
                <li v-for="feature in product.features" :key="feature">
                  {{ feature }}
                </li>
              </ul>
              <el-button 
                type="primary" 
                class="w-full"
                :class="{ 'is-popular': product.isPopular }"
              >
                立即购买
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </section>
    </div>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>关于我们</h4>
          <p>公司简介</p>
          <p>联系方式</p>
          <p>加入我们</p>
        </div>
        <div class="footer-section">
          <h4>产品</h4>
          <p>功能介绍</p>
          <p>最新动态</p>
          <p>技术支持</p>
        </div>
        <div class="footer-section">
          <h4>资源</h4>
          <p>帮助文档</p>
          <p>开发者社区</p>
          <p>API文档</p>
        </div>
        <div class="footer-section">
          <h4>关注我们</h4>
          <div class="social-links">
            <i class="el-icon-platform-eleme"></i>
            <i class="el-icon-platform-wechat"></i>
            <i class="el-icon-platform-weibo"></i>
          </div>
        </div>
      </div>
      <div class="copyright">
        © 2024 公司名称. All rights reserved.
      </div>
    </el-footer>
  </div>
</template>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 64px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo {
  display: flex;
  align-items: center;
}

.nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero-section {
  padding: 120px 40px 80px;
  text-align: center;
  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
  color: white;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.hero-desc {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.features-section {
  padding: 80px 40px;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #303133;
}

.feature-card {
  text-align: center;
  padding: 30px;
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-title {
  margin: 20px 0 10px;
  font-size: 1.25rem;
  color: #303133;
}

.feature-desc {
  color: #606266;
}

.pricing-section {
  padding: 80px 40px;
  background-color: white;
}

.price-card {
  text-align: center;
  padding: 40px;
  height: 100%;
}

.price-card.popular {
  transform: scale(1.05);
  border: 2px solid #409EFF;
}

.price-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.price-amount {
  font-size: 2.5rem;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 2rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.feature-list li {
  margin: 10px 0;
  color: #606266;
}

.footer {
  background-color: #303133;
  color: white;
  padding: 60px 40px 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.footer-section p {
  color: #909399;
  margin: 8px 0;
  cursor: pointer;
}

.footer-section p:hover {
  color: white;
}

.copyright {
  text-align: center;
  color: #909399;
  padding-top: 20px;
  border-top: 1px solid #404244;
}

/* 移动端优化样式 */
.mobile-menu-btn {
  display: none;
}

.mobile-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .header {
    padding: 0 16px;
    height: 56px;
  }

  .mobile-menu-btn {
    display: block;
    cursor: pointer;
  }

  .mobile-menu {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    padding: 20px;
    overflow-y: auto;
  }

  .mobile-menu.active {
    transform: translateX(0);
  }

  .mobile-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-links,
  .actions {
    display: none;
  }

  /* Hero 区域移动端优化 */
  .hero-section {
    padding: 80px 16px 40px;
  }

  .hero-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .hero-desc {
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
  }

  .hero-actions .el-button {
    width: 100%;
  }

  /* 特点展示移动端优化 */
  .features-section {
    padding: 40px 16px;
  }

  .feature-card {
    padding: 20px;
    margin-bottom: 16px;
  }

  /* 价格方案移动端优化 */
  .pricing-section {
    padding: 40px 16px;
  }

  .price-card {
    padding: 24px;
    margin-bottom: 16px;
  }

  .price-card.popular {
    transform: none;
    border-width: 1px;
  }

  .price-title {
    font-size: 1.25rem;
  }

  .price-amount {
    font-size: 2rem;
  }

  /* 页脚移动端优化 */
  .footer {
    padding: 40px 16px 20px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-section {
    text-align: center;
  }

  .social-links {
    justify-content: center;
    margin-top: 12px;
  }
}

/* 添加触摸设备的优化 */
@media (hover: none) {
  .feature-card:hover {
    transform: none;
  }

  .footer-section p:active {
    color: white;
  }
}

/* 适配不同屏幕高度 */
@media screen and (max-height: 600px) {
  .hero-section {
    padding: 60px 16px 30px;
  }

  .hero-title {
    margin-bottom: 1rem;
  }

  .hero-desc {
    margin-bottom: 1.5rem;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .mobile-menu {
    background: #1a1a1a;
  }
}
</style>
